<template>
<!--  <el-button :size="size" :type="type"-->
<!--             :loading="loading" :disabled="!hasPerms(perms)" @click="handleClick">-->
<!--    {{label}}-->
<!--  </el-button>-->
  <el-button :size="size" :type="type"
             :loading="loading" @click="handleClick" :icon="icon" :disabled="disabled">
    {{label}}
  </el-button>
</template>

<script>
  import { hasPermission } from '../permission/index.js'
  export default {
    name: 'vueButton',
    props: {
      label: {
        type: String,
        default: 'Button'
      },
      size: {
        type: String,
        default: 'mini'
      },
      type: {
        type: String,
        default: null
      },
      loading: {
        type: Boolean,
        default: false
      },
      icon: {
        type: String,
        default: ''
      },
      disabled: {
        type: Boolean,
        default: false
      },
      perms: {
        type: String,
        default: null
      }
    },
    data() {
      return {
      }
    },
    methods: {
      handleClick: function () {
        this.$emit('click', {})
      },
      hasPerms: function (perms) {
        return hasPermission(perms) & !this.disabled
      }
    },
    mounted() {
    }
  }
</script>

<style scoped>

</style>
